<script setup lang="ts">
import {useRoute} from 'vue-router'
const route = useRoute()
const item = route.query
console.log(item);
</script>

<template>
 <van-nav-bar @click-left="$router.back()"  :title=item.doctordescword left-arrow>
    <template #right>
      <van-icon name="weapp-nav" size="18" />
    </template>
  </van-nav-bar>
  <div class="box">
    <div class="top">
      <div class="title">{{item.doctordescword}}</div>
      <div class="top-bottom">
        <span>2024-11-15</span>
        <span class="se"><van-icon name="eye" />{{item.doctortime}}次</span>
      </div>
    </div>

    <div class="com">
      <div>{{item.doctordescword}}</div>
      <div>{{item.doctordescword}}</div>
    </div>

    <div class="bottom">
      <dl>
        <dt>
          <img :src=item.doctorimage alt="">
        </dt>
        <dd>
          <div class="title">{{item.doctorname}}</div>
          <div class="desc">{{item.doctorstate}}|{{item.doctoradministre}}</div>
          <div class="price">
            <span style="width: 60px;height: 18px; background: #01b488; color: #fff; border-radius: 5px;line-height: 18px; text-align: center;">三级甲等</span>
            <span style="width: 140px;margin-left: 5px; ">首都医科大学医院</span>
          </div>
        </dd>
      </dl>
      <van-button type="primary" style="margin-top: 20px;margin-right: 7px; " size="small">马上提问</van-button>
    </div>
  </div>
</template>


<style scoped lang="scss">
.box {
  width: 95%;
  height: 93%;
  font-size: 0.35rem;
  letter-spacing: 3px;
  font-family:"Calibri";
  line-height: 28px;
  margin-left: 2.5%;
  overflow: scroll;

  .top {
    width: 100%;
    height: 100px;
    overflow: hidden;

    .title {
      font-weight: bolder;
      font-size: 0.4rem;
      height: 35px;
      overflow: hidden;
      padding-top: 10px;
    }

    .top-bottom{
      font-size: 0.3rem;
      display: flex;
      color: #999;

      .se {
        color: orangered;
      }
    }
  }

     .bottom {
      width: 100%;
      height: 100px;
      background-color: #f2f4f6;
      display: flex;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;

      dl {
        width:75%;
        height: 100%;
        display: flex;
        align-items: center;
        margin-left: 10px;

        dt {
          width: 70px;
          height: 70px;

          img {
            width: 100%;
            height: 100%;
            background-color: rgb(15, 207, 255);
            border-radius: 50%;
          }
        }

        dd {
          width: 70%;
          font-size: 0.25rem;
          letter-spacing: 0px;
          margin-left: 5px;

          .title {
            height: 20px;
            line-height: 20px;
            font-weight: bolder;
            font-size: 0.35rem;
            margin-top: 10px;
          }

          .desc {
            color: #696969;
            margin-top: 5px
          }

          .price {
            display: flex;
            align-items: center;
            color: #696969;
        }
      }
      }
    }
}
</style>
